<template>
  <div class="contrain">
    <div class="head">
      <span>ID号登陆</span>
    </div>
    <div class="main">
      <van-form @failed="onFailed">
        <van-field v-model="login.uid"
                   label="ID号"
                   required
                   placeholder="请输入ID号"
                   :rules="[{ validator}]" />
        <van-field v-model="
                   login.password"
                   required
                   label="密码"
                   type="password"
                   placeholder="请输入密码"
                   :rules="[{ validator}]" />
        <van-field v-model="
                   Vcode"
                   placeholder="请输入验证码"
                   label="验证码"
                   required
                   :rules="[{ validator}]" />
        <div class="Vcode">
          <s-identify :identifyCode="identifyCode"
                      @change="refreshCode()"></s-identify>
          （点击刷新）
        </div>
        <div class="btn">
          <van-button round
                      block
                      type="info"
                      native-type="submit"
                      @click="Login">登陆</van-button>
          <p @click="toRegister">还没有账号？点击注册</p>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import SIdentify from '../utils/Sldentify.vue'
export default {
  components: { SIdentify },
  data () {
    return {
      identifyCode: '',
      isLoading: false,
      login: {
        uid: '',
        password: ''
      },
      Vcode: ''
    }
  },
  created () {
    this.refreshCode()
  },
  methods: {
    onFailed () {
      this.$toast.fail('请输入完整信息')
    },
    validator (val) {
      if (!val) {
        return false
      }
    },
    refreshCode () {
      const identifyCodes = '0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ'
      this.identifyCode = ''
      this.makeCode(identifyCodes, 4)
    },
    toRegister () {
      this.$router.push('/login/register')
    },
    Login () {
      if (this.Vcode.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.refreshCode()
        return this.$toast.fail('验证码输入错误')
      }
      this.$store.dispatch('idLogin', this.login).then(() => {
        this.$toast.success('登陆成功')
        this.$router.push('/myself')
      }).catch(() => {
        this.refreshCode()
      })
    },
    randomNum (min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min)
    },
    makeCode (data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)]
      }
    }
  }
}
</script>
<style lang="less" scoped>
.contrain {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 15px;
  .Vcode {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .head {
    margin-top: 20%;
    span {
      font-size: 24px;
    }
  }
  .main {
    margin-top: 15px;
  }
  .btn {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    p {
      margin-top: 15px;
      align-self: center;
    }
  }
}
</style>
